<template>
  <el-row class="bgf">
      <el-col :span="12" :offset="5">
        <el-form label-width="100px" :model="forminfo" :rules="rules" ref="forminfo">
            <el-form-item label="角色名称" prop="roleid"  >
                <el-select v-model="forminfo.roleid" placeholder="请选择父级">
                    <el-option label="请选择" value=""></el-option>
                    <el-option v-for="item in rolelist" :label="item.rolename" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="管理员名称" prop="username">
                <el-input v-model="forminfo.username"></el-input>
            </el-form-item>
            <el-form-item label="管理员密码" prop="password">
                <el-input v-model="forminfo.password" show-password :placeholder="$route.params.id?'留空为不修改密码':''"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio v-model="forminfo.status" :label="1">正常</el-radio>
                <el-radio v-model="forminfo.status" :label="0">禁用</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-if="!$route.params.id" @click="submit">立即添加</el-button>
                <el-button type="success" v-else @click="submit">立即修改</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
     </el-col>   
  </el-row>
</template>

<script>
// 如何区分是添加还是修改页面！
    // 根据路由是否传入的 动态参数！  this.$route.params.id  修改！
import { getRole } from "@/request/role"
import { addAdmin,editAdmin,getAdmin } from "@/request/admin"
let defaultInfo = {};   // 修改的时候的重置！
export default {
    data(){
        return{
            forminfo:{
                roleid:"",
                username:"",
                password:"",
                status:1
            },
            rules:{ // 表单的验证规则
                username:[
                    { required:true,message:"标题必须写",trigger:'blur' }
                ],
                roleid:[
                    { required:true,message:"角色必选",trigger:'blur' }
                ]
            },
            rolelist:[]   //菜单数据,用于下拉列表！
        }
    },
    created(){
        this.getlist();  // 获取列表
        if(this.$route.params.id){
            // 获取修改的这一条的数据，赋给表单！
            this.getinfo(this.$route.params.id)
        }
    },
    methods:{
        async getlist(){
            // 获取角色列表
            this.rolelist = await getRole();
        },
        async getinfo(id){
            // 获取修改数据，赋给表单！
            this.forminfo = await getAdmin({uid:id});
            this.forminfo.password ="";
            // 赋给一个临时变量，用于重置的时候再次赋值！
            defaultInfo = { ...this.forminfo }
        },
        submit(){  // 提交数据 【添加、修改】
            this.$refs.forminfo.validate(async isok=>{
                if(isok){
                    // 发送请求！
                    let res;
                    if(this.$route.params.id){
                        this.forminfo.uid = this.$route.params.id;   // 给表单数据添加上id
                        res = await editAdmin(this.forminfo); // 修改请求
                    }else{
                        res = await addAdmin(this.forminfo);  // 添加请求
                    }
                    if(res){
                      this.$router.back();
                    }
                }else{
                    this.$message.warn('验证不通过')
                }
            })
        },
        reset(){  // 重置
            // resetFields表单重置！
            if(this.$route.params.id){  // 修改重置
                this.forminfo = { ...defaultInfo }
            }else{ // 添加重置
                this.$refs.forminfo.resetFields();
            }
        }
    },
    components:{}
}

</script>
<style scoped>
</style>